/**
* 培训查看
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>添加试题</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 20px; width: 800px; border:2px solid #b4bccc">
      <el-row :gutter=20>
        <el-col>
          <div>
            <el-divider content-position="left">基本信息</el-divider>
          </div>
        </el-col>
        <el-form ref="form" :model="form" label-width="80px" method="post">
          <el-col :sm="12">
            <div>
              <el-form-item label="试题内容">
                <el-input v-model="form.test.testName"></el-input>
              </el-form-item>
            </div>
          </el-col>

          <el-col :sm="12">
            <div>
              <el-form-item label="试题难度">
                <el-select v-model="form.test.difficulty" placeholder="请选择难度等级">
                  <el-option label="简单" value="1"></el-option>
                  <el-option label="中等" value="2"></el-option>
                  <el-option label="困难" value="3"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>



          <el-col :sm="12">
            <div>
              <el-form-item label="单选多选">
                <el-select v-model="form.test.isMultilychoice" placeholder="请选择选择题状态">
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="多选" value="2"></el-option>

                </el-select>
              </el-form-item>
            </div>
          </el-col>



          <el-col :sm="12">
            <div>
              <el-form-item label="答案选项">
                <el-input v-model="form.test.answerIds"></el-input>
              </el-form-item>
            </div>
          </el-col>



          <el-col :sm="12">
            <div>
              <el-form-item label="上传人">
                <el-input v-model="form.test.updatePeople"></el-input>
              </el-form-item>
            </div>
          </el-col>







          <el-col :sm="12">
            <div>
              <!-- <el-form-item label="">
                <el-input v-model="form.test.trainName"></el-input>
              </el-form-item> -->

              <el-form>
                <el-form-item label="培训名称" label-width="130px">
                  <template>
                    <el-select v-model="trainName" placeholder="请选择" @change="trainChange">
                      <el-option v-for="(item,index) in trainList" :key="index" :value="item.trainName">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-form>
            </div>
          </el-col>



          <el-col :sm="12">
            <div>
              <el-form-item label="选项1:">
                <el-input v-model="form.optiones[0].optiones"></el-input>
              </el-form-item>

              <!-- <p v-for="item in list" v-bind:key="item.id">
            </p>   -->
            </div>
          </el-col>


          <el-col :sm="12">
            <div>
              <el-form-item label="选项2:">
                <el-input v-model="form.optiones[1].optiones"></el-input>
              </el-form-item>

              <!-- <p v-for="item in list" v-bind:key="item.id">
            </p>   -->
            </div>
          </el-col>

          <el-col :sm="12">
            <div>
              <el-form-item label="选项3:">
                <el-input v-model="form.optiones[2].optiones"></el-input>
              </el-form-item>

              <!-- <p v-for="item in list" v-bind:key="item.id">
            </p>   -->
            </div>
          </el-col>

          <el-col :sm="12">
            <div>
              <el-form-item label="选项4:">
                <el-input v-model="form.optiones[3].optiones"></el-input>
              </el-form-item>

              <!-- <p v-for="item in list" v-bind:key="item.id">
            </p>   -->
            </div>
          </el-col>





          <el-col :offset="17">
            <div>
              <el-form-item>
                <el-button size="small" type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
            </div>
          </el-col>








        </el-form>
      </el-row>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          test: {
            id: '',
            testName: '',
            difficulty: '',
            isMultilychoice: '',
            updatePeople: '',
            trainId: '',
            answerIds: '',
          },
          optiones: [{
              optiones: ''
            },
            {
              optiones: ''
            },
            {
              optiones: ''
            },
            {
              optiones: ''
            }
          ]
          // option0: '',
          // option1: '',
          // option2: '',
          // option3: '',

        },
        train: {}, //查询对象
        trainList: {}, //所有的培训信息
        trainName: '',



      }
    },
    // 注册组件
    components: {},

    /**
     * 数据发生改变
     */
    watch: {},

    /**
     * 创建完毕
     */
    created() {
      // this.getdata(this.formInline)
      // this.getdata()
      this.finfindTrainByTen()
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      //获取前面10个培训项目
      finfindTrainByTen() {
        this.$axios.post("/api/train/findTrain/1/10", this.train).then(res => {
          console.log(res);
          this.trainList = res.data.data.list
          console.log(this.trainList);
        }).catch(e => {
          console.log(e);
        })
      },
      onSubmit() {


        this.$axios.post('/api/option/addOptiones/', this.form).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.open()

          } else {
            this.$message({
              type: 'error',
              message: '添加失败!'
            })
          }
        }).catch()
      },

      // // 获取数据方法
      // getdata() {
      //   // 获取培训列表
      //   this.$axios.get('/api/category/findCategoryMenu/')
      //     .then(res => {
      //       console.log(res)
      //       if (res.data.code === 200) {
      //         this.trainerCategoryMenu = res.data.data
      //         console.log(this.trainerCategoryMenu)
      //       }
      //     }).catch()



      // },

      //确认弹框
      open() {
        this.$confirm('是否继续添加?', '提示', {
          confirmButtonText: '继续添加',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.clearData()
        }).catch(() => {
          this.$router.push({
            name: 'findTest'
          })
        });
      },
      //初始化数据
      clearData() {
        // this.form.id = ''
        // this.form.testName = ''
        // this.form.difficulty = ''
        // this.form.isMultilychoice = ''
        // this.form.trainName = ''
        // this.form.answerIds = ''
        // this.form.optiones0 = ''
        // this.form.optiones1 = ''
        // this.form.optiones2 = ''
        // this.form.optiones3 = ''

        this.form.test.testName = ''
        this.form.test.difficulty = ''
        this.form.test.isMultilychoice = ''
        this.form.test.updatePeople = ''
        this.form.test.trainId = ''
        this.form.test.answerIds = ''
        this.form.test.testName = ''
        this.form.test.id = ''
        this.form.optiones[0].optiones = ''
        this.form.optiones[1].optiones = ''
        this.form.optiones[2].optiones = ''
        this.form.optiones[3].optiones = ''

      },
      //获得培训名称的id
      trainChange() {

        for (const key in this.trainList) {
          if (this.trainList[key].trainName == this.trainName) {
            this.form.test.trainId = this.trainList[key].id
            console.log(this.form.test.trainId);
          }
        }
      }




    }
  }

</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

</style>
